<template>
  <div class="w-full h-[4368px] bg-white">
    <div class="w-full h-[4368px] flex flex-col">
      <!-- Header -->
      <Header />
      <div class="w-full bg-[#F1F4F9]">
        <!-- Main Content -->
        <div
          class="w-[1420px] mx-auto h-auto flex justify-between bg-cover px-10 py-20"
        >
          <!-- Left Content -->
          <div class="w-[692px] flex flex-col">
            <img
              class="w-[120px] h-[120px] rounded-full"
              src="/img/67fd3085f3c443d09c8e8c51bc887261.png"
            />
            <span class="mt-[60px] text-[56px] font-bold">捐献者 200506</span>

            <div class="mt-[38px] text-[30px] text-[#2B5CAB]">
              <span>状态：</span>
              <span>现在可用</span>
            </div>

            <div class="mt-[51px] w-[542px] h-[56px] flex justify-between">
              <div
                class="w-[166px] h-[56px] bg-[#2B5CAB] rounded-lg flex items-center justify-center"
                @click="applyDate"
              >
                <span class="text-[24px] text-white">订购周期</span>
              </div>

              <div
                class="w-[144px] h-[56px] bg-[#2B5CAB] rounded-lg flex items-center justify-center ml-[20px]"
                @click="saveClick"
              >
                <img
                  class="w-[26px] h-[23px]"
                  src="/img/ps95w1z2kzj6hllmq8n71lr91646xc403wnf6735d0e.png"
                />
                <span
                  class="ml-[10px] text-[24px] text-white"
                  v-if="saveValue == '0'"
                  >收藏</span
                >
                <span class="ml-[10px] text-[24px] text-white" v-else
                  >取消收藏</span
                >
              </div>

              <div
                class="w-[192px] h-[56px] bg-white border border-[#A2C4E8] rounded-lg flex items-center justify-center ml-[20px]"
                @click="goBack"
              >
                <img
                  class="w-[24px] h-[17px]"
                  src="/img/psg969qqdc8wvxhghywr6cyhjamo6cfpv65d1938b5.png"
                />
                <span class="ml-[10px] text-[24px]">返回搜索</span>
              </div>
            </div>

            <div class="mt-[60px] flex items-center">
              <div class="w-[6px] h-[26px] bg-[#2B5CAB]"></div>
              <div class="ml-[10px] text-[24px] font-bold text-[#2B5CAB]">
                捐献者自我介绍
              </div>
            </div>

            <div class="mt-[29px] w-[692px] text-[16px] leading-[1.5]">
              我是一个外向，幽默风趣，内心坚定的人。同时又有爱心和同情心，对家人和朋友真诚随和，善解人意。工作上有组织，有野心，无论多难的事情也会坚持做完，对任何事情充满激情和动力。我的职业目标是成为并购合伙人，拿到我的注册会计师、特许金融分析师和工商管理硕士学位。我想帮助一些人实现他们的梦想。同时也可以还清学生贷款，帮助我的兄弟姐妹支付学费。
            </div>
          </div>

          <!-- Right Image -->
          <img class="w-[457px] h-[610px]" src="/img/KPSoXQKkZQkYH2oM.png" />
        </div>
      </div>

      <!-- Footer Section -->
      <div class="w-full mx-auto bg-[#F1F4F9] relative">
        <div class="w-[1420px] mx-auto mx-[250px] flex justify-between">
          <!-- Left Sidebar -->
          <div class="w-[206px] h-[878px] bg-white rounded-[24px] mt-[10px]">
            <div class="flex flex-col w-[180px] mx-auto my-5 gap-[10px]">
              <el-button
                v-for="(item, index) in sliderList"
                :key="index"
                :type="activeSlider == item.value ? 'success' : 'text'"
                @click="selectSlider(item)"
                >{{ item.label }}</el-button
              >
            </div>
          </div>

          <!-- Main Content -->
          <!-- 简介 -->
          <div
            class="w-[1200px] h-auto bg-white rounded-[24px]"
            v-if="activeSlider == 0"
          >
            <!-- Tabs -->
            <div
              class="w-[638px] h-[42px] bg-[#F5F5F5] rounded-lg mt-[50px] ml-[32px] flex items-center"
            >
              <el-button type="primary" @click="scrollToAnchor('#section1')"
                >基本</el-button
              >
              <!-- <el-button type="text" disabled>基本</el-button> -->
              <el-button type="text" @click="scrollToAnchor('#section2')"
                >医疗背景</el-button
              >
              <el-button type="text" @click="scrollToAnchor('#section3')"
                >生殖资料</el-button
              >
              <el-button type="text" @click="scrollToAnchor('#section4')"
                >家庭信息</el-button
              >
              <el-button type="text" @click="scrollToAnchor('#section5')"
                >开放式问题</el-button
              >
              <el-button type="text" @click="scrollToAnchor('#section6')"
                >所有捐卵历史</el-button
              >
            </div>

            <div class="w-full h-[1px] bg-[#CCCCCC] mt-[10px]"></div>

            <!-- 基本信息 -->
            <Base :userId="user_id" id="section1" />

            <!--            &lt;!&ndash; Medical Background Section &ndash;&gt;-->
            <Medical :userId="user_id" id="section2" />

            <!--            &lt;!&ndash; Reproductive Info Section &ndash;&gt;-->
            <Reproductive :userId="user_id" id="section3" />

            <!--            &lt;!&ndash; Family Info Section &ndash;&gt;-->
            <Family :userId="user_id" id="section4" />

            <!--            &lt;!&ndash; Open Info Section &ndash;&gt;-->
            <Open :userId="user_id" id="section5" />
            <!--            &lt;!&ndash; History Info Section &ndash;&gt;-->
            <History :userId="user_id" id="section6" />
            <!--            &lt;!&ndash; Photo Gallery &ndash;&gt;-->
            <Photo :userId="user_id" />
          </div>
          <!-- 基因报告 -->
          <div
            class="w-[1200px] h-auto bg-white rounded-[24px]"
            v-else-if="activeSlider == 1"
          >
            <report />
          </div>
          <!-- 视频 -->
          <div
            class="w-[1200px] h-auto bg-white rounded-[24px]"
            v-else-if="activeSlider == 2"
          >
            <videoS />
          </div>
          <!-- 照片 -->
          <div class="w-[1200px] h-auto bg-white rounded-[24px]" v-else>
            <photoS />
          </div>
        </div>

        <!-- Footer -->
        <Footer />
      </div>
    </div>
    <!-- 订购周期 -->
    <el-dialog v-model="orderDialogVisible" title="订购周期" width="700px">
      <div class=""></div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">Cancel</el-button>
          <el-button type="primary" @click="applySubmit"> Apply </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useUserStore } from "@/store/modules/user";
import { ElTable, ElTableColumn, ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import Header from "@/components/header.vue";
import Footer from "@/components/footer.vue";
import Base from "@/components/egg-donors/egg-base";
import Medical from "@/components/egg-donors/medical";
import Reproductive from "@/components/egg-donors/reproductive";
import Family from "@/components/egg-donors/family";
import Open from "@/components/egg-donors/open";
import History from "@/components/egg-donors/history";
import Photo from "@/components/egg-donors/photo";
//
import report from "./components/report.vue";
import videoS from "./components/video.vue";
import photoS from "./components/photo.vue";
import { setPersonalInformation } from "@/api/business/egg";
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
// 使用 ref 定义响应式数据
const user_id = ref(userStore.id);
const saveValue = ref("0");
const saveFlag = ref(false);
const applyFlag = ref(false);
const orderDialogVisible = ref(false);
const scrollToAnchor = (anchor) => {
  const element = document.querySelector(anchor);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
};

const activeSlider = ref(0);
const sliderList = ref([
  {
    label: "简介",
    value: 0,
  },
  {
    label: "基因报告",
    value: 1,
  },
  {
    label: "视频",
    value: 2,
  },
  {
    label: "照片",
    value: 3,
  },
]);
const selectSlider = (item) => {
  activeSlider.value = item.value;
};
const goBack = () => {
  router.go(-1);
};
const saveClick = () => {
  if (saveFlag.value) {
    ElMessage.error("请不要连续点击");
    return;
  }
  saveFlag.value = true;
  const query = {
    userId: user_id.value,
    donorid: route.query.id,
  };
  setPersonalInformation(query).then((res) => {
    console.log(res, "setPersonalInformation");
    saveFlag.value = false;
  });
  // setTimeout(() => {
  //   saveValue.value = saveValue.value === "0" ? "1" : "0";
  //   saveFlag.value = false;
  // }, 3000);
};
const applyDate = () => {
  if (applyFlag.value) {
    ElMessage.error("请不要连续点击");
    return;
  }
  orderDialogVisible.value = true;
  applyFlag.value = true;
  setTimeout(() => {
    applyFlag.value = false;
  }, 3000);
};
const cancel = () => {
  orderDialogVisible.value = false;
};
const applySubmit = () => {
  console.log(11111);
  orderDialogVisible.value = false;
};

// 用户列表数据
const userList = ref([]); // 确保模板中绑定的是 userList
// 加载状态
const loading = ref(true); // 确保模板中绑定了 v-loading="loading"
// 总条数
const total = ref(0); // 确保模板中绑定了 :total="total"

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  userName: undefined,
  phonenumber: undefined,
  status: undefined,
  deptId: undefined,
});

/** 查询用户列表 */
function getList() {
  loading.value = true;
  listPartner(queryParams).then((res) => {
    loading.value = false;
    userList.value = res.rows; // 修正为 userList
    total.value = res.total;
  });
}
</script>
<style scoped>
.bottom-border-table {
  --el-table-border-color: #e8e8e8; /* 浅灰色 */
}

.bottom-border-table :deep(.el-table__inner-wrapper::before) {
  display: none; /* 隐藏右侧边框 */
}

.bottom-border-table :deep(.el-table__border-left-patch),
.bottom-border-table :deep(.el-table__border-right-patch) {
  display: none; /* 隐藏左侧和右侧边框补丁 */
}

.bottom-border-table :deep(.el-table td) {
  border-bottom: 1px solid var(--el-table-border-color); /* 仅保留单元格下边框 */
  border-right: none; /* 移除右侧边框 */
}

.bottom-border-table :deep(.el-table__body tr:last-child td) {
  border-bottom: none; /* 最后一行移除下边框 */
}

/* 两端对齐样式 */
.align-table :deep(.label-column .cell) {
  text-align: justify;
  text-align-last: justify;
  padding-left: 12px;
}

.align-table :deep(.value-column .cell) {
  text-align: left;
  padding-right: 12px;
  color: #4d4d4d;
}
</style>
